<template>
	<ul class="list-content">
		<!--    listType 0好友 1群聊-->
		<template v-if="list.length > 0">
			<li
				class="list-item"
				v-for="(item, index) in list"
				:key="index"
				:class="listCurrentIndex === index && !showClose ? 'active' : ''"
				@click="handleListItemClick(item._id, index)"
			>
				<div class="wrap">
					<div class="user-img">
						<img :src="proxy.$baseUrl + item.imgUrl" alt="" />
					</div>
					<div class="user-info" v-if="props.listType == 0">
						<div class="nick">{{ item.nick }}</div>
						<div class="sign">{{ item.sign }}</div>
					</div>
					<div class="group-info" v-else>
						<div class="name">{{ item.groupName }}</div>
					</div>
				</div>
			</li>
		</template>
		<template v-else>
			<div class="no-contact">
				<img src="@/assets/images/no_contact.png" alt="" />
			</div>
		</template>
	</ul>
</template>
<script setup lang="ts">
// 全局事件总线
import $bus from '@/utils/eventBus'

const { proxy } = getCurrentInstance()
// listType 0好友 1群聊
const props = defineProps(['dataList', 'listType', 'showClose'])
const emits = defineEmits(['changeRightComponent'])

// 列表数据
const list = ref<any>([])

// 当前选中的聊天下标
const listCurrentIndex = ref<number>(-1)

watch(
	() => props.dataList,
	(val) => {
		listCurrentIndex.value = -1
		list.value = val
	}
)

// 切换高亮显示
const handleListItemClick = (id: string, index: number) => {
	console.log(123)
	listCurrentIndex.value = index
	// 关闭默认组件
	if (listCurrentIndex.value !== -1) {
		emits('changeRightComponent', 1)
	}
	console.log(7489)
	// 主页信息
	$bus.emit('contactHomeInfo', { listType: props.listType, id })
}
</script>

<style scoped lang="scss">
.list-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.list-item {
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: center;

		.wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.user-img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;

				img {
					width: 40px;
					height: 40px;
				}
			}

			.user-info,
			.group-info {
				flex: 1;
				height: 40px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 10px;

				.nick,
				.name {
					width: 170px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 15px;
					color: var(--contact-apply-message-group-color);
				}

				.sign {
					width: 170px;
					font-size: 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #8c8c8c;
				}
			}
		}
	}

	.active {
		background-color: var(--contact-chat-list-active-bg-color);
	}
}

.no-contact {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
	img {
		width: 150px;
		height: 150px;
	}
}
</style>
